<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入cesiumjs库 -->
    <script src="../lib/cesium/Cesium.js"></script>
    <title>Document</title>
</head>
<style>
    /* 引入cesium widget样式 */
    @import url(../lib/cesium/Widgets/widgets.css);

    html,
    body,
    #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
</style>

<body>
    <!-- 地图容器 -->
    <div id="cesiumContainer"></div>
    <script src="app.js"></script>
</body>
<script>
    let viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder: false, // 搜地理位置搜索工
        homeButton: false, // 返回首页按钮
        sceneModePicker: false, // 2D 3D切换按钮
        baseLayerPicker: false, // 底图切换按钮
        navigationHelpButton: false, // 帮助按钮
        animation: false, // 左下角动画面板
        timeline: false, // 时间轴
        fullscreenButton: false, // 全屏按钮
    });
    // 隐藏logo
    viewer.cesiumWidget.creditContainer.style.display = "none";

    var position = Cesium.Cartesian3.fromDegrees(121.499113, 31.239713); // 经纬度

    var billboard = viewer.entities.add({
        name: "Billboard",
        position: position,
        billboard: {
            image: getPointCanvas(),
            size: 50,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            // pixelOffset: new Cesium.PixelOffset(0, -25),
            repeat: new Cesium.Cartesian2(2, 1)
        }
    });
    viewer.flyTo(billboard);
    function getPointCanvas(maxW = 50, minW = 30) {
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.fillStyle = "#fff";
        ctx.arc(100, 100, maxW, 0, Math.PI * 2, true);
        ctx.fill();
        // ctx.stroke()
        ctx.beginPath();
        ctx.arc(100, 100, minW, 0, Math.PI * 2, true);
        ctx.fill();
        ctx.stroke();
        // 将画布转化成图片
        let image = new Image();
        image.src = canvas.toDataURL("image/png");
        return image;
    }
</script>

</html>